<template>
  <div style="width: 100%;height: 100%">
    <div class="top">
      <div class="num-bg">
        <div class="text">数据接入单位</div>
        <div class="num">{{ allData.resourceCount }}</div>
      </div>
      <div class="num-bg">
        <div class="text">数据资源目录</div>
        <div class="num">{{ allData.resourceTotal }}</div>
      </div>
      <div class="num-bg">
        <div class="text">资源数据量</div>
        <div class="num">{{ allData.totalDataVolume / 10000 }}w</div>
      </div>
    </div>
    <div class="pie" id="group-chart1"></div>

  </div>
</template>

<script>

import { dataResources } from '@/api';

let style = {
  fontSize: 24,
};
import * as echarts from 'echarts';

export default {
  data() {
    return {
      options: {},
      allData: {},
    };
  },
  props: ['termId'],
  created() {
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
  },
  methods: {
    async getData(cycleId) {
      const res = await dataResources();
      this.allData = res.data;
      this.initChart(res.data);
    },
    initChart(items) {
      var myChart = this.$echarts.init(document.getElementById('group-chart1'));
      let yAxisData = [], seriesData = [];
      items.list.forEach((item, ix) => {
        yAxisData.push(item.name);
        seriesData.push(item.number);
      });
      let option = {
        tooltip: {
          trigger: 'axis',
          border: 0,
          boxShadow: ' 0 0 10px rgb(0,153,184) inset,0 0 30px rgb(0,153,184)',
          borderRadius: 4,
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '0%',
          right: 20,
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              type:'dashed'
            },
          },
        },
        yAxis: {
          type: 'category',
          data: yAxisData,
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#fff",
              margin: 15,
            },

          },
        },
        series: [
          {
            name: '数据资源',
            type: 'bar',
            data: seriesData,
            showBackground: true,
            stack: 'Total',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: '#019ac8' },
                { offset: 1, color: '#0af1c3' }
              ])
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    clearData() {
    },
  },
};
</script>
<style lang='scss' scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: center;

  .num-bg {
    width: 180px;
    margin: 0 12px;
    height: 77px;
    background-image: url("~@/assets/img/计数框.png");
    background-size: cover;
    background-position: center center;

    .text {
      font-family: YouSheBiaoTiHei;
      font-size: 22px;
      text-align: center;
      margin-top: 8px;
      font-weight: 700;
      font-stretch: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #ffffff;
      background-image: -webkit-linear-gradient(bottom, #5197FF, #80F2FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent

    }

    .num {
      font-family: YouSheBiaoTiHei;
      font-size: 32px;
      text-align: center;
      margin-top: 10px;
      font-weight: 700;
      font-stretch: normal;
      line-height: 20px;
      letter-spacing: 0px;
      color: #fff43f;
    }
  }
}

.pie {
  width: 100%;
  height: calc(100% - 80px)
}
</style>
